<template>
  <view class="field-input field-form-item">
    <u-form-item :label="label" :required="required" :prop="prop">
      <u-input
        :value="value"
        :type="type"
        :maxlength="maxlength"
        :placeholder="placeholder"
        :disabled="disabled || readonly"
        @input="onChange"
        @change="onChange"
      />
    </u-form-item>
</view>
</template>

<script>
import { validateWidget } from '@/utils/validate.js';

export default {
  name: 'fieldInput',
  props: {
    value: {
      type: [String, Number, Date, Boolean]
    },
    label: {
      type: String
    },
    required: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    maxlength: {
      type: Number,
      default: -1
    },
    password: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    prop: {
      type: String
    },
    rules: {
      type: Array
    }
  },
  data () {
    return {
      dirty: false,
      errorMessage: ''
    }
  },
  methods: {
    onChange (val) {
      this.$emit('input', val);
      this.$emit('change', val);
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    },
    validateWidget() {
      return new Promise((resolve, reject) => {
        validateWidget(this.rules, this.value).then(res => {
          this.errorMessage = '';
          resolve();
        }).catch(e => {
          this.errorMessage = e;
          resolve(e)
        });
      });
    }
  },
  mounted() {
    console.log(this.label, this.disabled, this.readonly);
  }
};
</script>